<template>
  <div class="create">
      <x-header :left-options="{showBack: true, backText:'新增收货地址'}"><div class="vux-header-right" @click="add"><span class="iconfont icon-Ge_Dizhi_Gou"></span></div></x-header>
      <p class="attention">联系人</p>
      <form>
      <div class="weui-cell name">
          <div class="weui-cell__hd"><label class="weui-label">姓名:</label></div>
          <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="recipient" v-model="name" placeholder="请输入收货人姓名">
          </div>
      </div>

      <div class="weui-cells weui-cells_checkbox">
          <label class="weui-cell weui-check__label" for="s11">
              <div class="weui-cell__hd">
                  <input type="radio" class="weui-check" name="gender" id="s11" checked="checked" v-model="sex" value="1">
                  <i class="weui-icon-checked"></i>男同学
              </div>
          </label>

          <label class="weui-cell weui-check__label" for="s12">
              <div class="weui-cell__hd">
                  <input type="radio" name="gender" class="weui-check" id="s12" v-model="sex" value="2">
                  <i class="weui-icon-checked"></i>女同学
              </div>
          </label>
      </div>
      
      <div class="weui-cell name">
          <div class="weui-cell__hd"><label class="weui-label">手机:</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" name="phone" placeholder="请填写收货手机号码" v-model="phone">
          </div>
      </div>

      <p class="attention">收货地址</p>
      <div class="weui-cell weui-cell_select weui-cell_select-after location">
          <div class="weui-cell__hd">
              <label for="" class="weui-label">学校:<span class="iconfont icon-Ge_Dizhi"></span></label>
          </div>
          <div class="weui-cell__bd">
              <input type="text" class="weui-select" placeholder="点击选择" @click="isShow=true" readonly="readonly" v-model="year7Value">
          </div>
      </div>

      <section class="" v-show="isShow">
        <div class="depend">
          <div class="circle"></div>
          <picker :data='year7' :fixed-columns="2" :columns=3 v-model='year7Value' @on-change='change'></picker>
          <div class="footer" @click="beSure">确认</div>
        </div>
        <div class="weui-mask" @click="isShow = !isShow"></div>
      </section>

      <div class="weui-cell area">
          <div class="weui-cell__hd"><label class="weui-label">楼栋-门牌号:</label></div>
          <div class="weui-cell__bd">
              <input class="weui-input" type="text"  placeholder="例如:16栋 515" v-model="roomNum">
          </div>
      </div>
    </form>

  </div>
</template>

<script>
import { XHeader, Picker } from 'vux'

export default {
  data() {
    return {
      isShow:false,
      name:null,
      schoolStr:null,
      schoolId:null,
      campusId:null,
      schoolVal:null,
      campusVal:null,
      phone:null,
      roomNum:null,
      sex:1,
      text:null,
      year7: [],
      year7Value: [],
      schoolList:null,
    }
  },
  components: {
    XHeader,
    Picker
  },
  methods:{
    getId() {
      for(var i=0;i<this.year7.length;i++){
        if( this.year7Value[0] == this.year7[i].name){
          this.schoolId = this.year7[i].id;
        }
        if(this.year7Value[1] == this.year7[i].name){
          this.campusId = this.year7[i].id;
        }
      }
    },
    campusPull(id,parent) {
      this.$http.get('/api/schools/'+id+'/campuses').then((res)=>{
        let text = parent;
        let campus = res.body
        for(var j=0;j<campus.length;j++){
          this.year7.push({name: campus[j].text, value: campus[j].text, parent: text, id:campus[j].id});
        }
        this.getId();
      })
    },
    add() {
      if( !(/^1[34578]\d{9}$/.test(this.phone)) ){
        alert('手机号码有误');
      }else{
        let prams = {'recipient':this.name,'school_id': this.schoolId,'campus_id':this.campusId,'phone':this.phone,'gender':this.sex,'building_number':this.roomNum,'text':this.year7Value[0]+this.year7Value[1]+this.roomNum};
        this.$http.post('/api/delivery-addresses',prams).then((res) => {
            this.$router.push({path:'/dist/Person'});
        });
      }
    },
    beSure() {
      this.isShow = !this.isShow ;
      this.getId();
    }
  },
  created(){
    this.$http.get('/api/schools').then((res) => {
      let data = res.body;
      this.schoolList = data;
      for(var i=0;i<data.length;i++){
        this.year7.push({name: data[i].text, value: data[i].text, parent: 0,id:data[i].id});
        var id = data[i].id;
        var parent = data[i].text;
        this.campusPull(id,parent);
      }
    });
  },
  mounted() {
    
  }

}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.create{
  margin-top:46px;
}
.attention{
  color:#969696;
  font-size:16px;
  line-height:5.8rem;
  padding-left:2rem;
}
.weui-check__label{
  display:inline-block;
}
.name,.location,.area{
  background-color:#fff;
  font-size:16px;
}
.location{
  position: relative;
}
.location:after{
  position: absolute;
  content:"";
  border:1px solid #909596;
  border-width:2px 2px 0px 0px;
  height:8px;
  width:8px;
  right:2rem;
  top:50%;
  transform:rotate(45deg) translateY(-50%);
  -webkit-transform:rotate(45deg) translateY(-50%);
}
.area{}
.weui-cells_checkbox{
  text-align:center;
}
.location .iconfont{
  margin-left:0.5rem;
}
.icon-Ge_Dizhi_Gou{
  color:#fff;
}
.weui-cell:before{
  left:0px!important;
}
.create .weui-cell input[type="text"]{
  height:2rem;
  width:80%;
  border:none;
  outline:none;
  text-indent:1.2rem;
}
input[type='radio']{  
    font-size:1em;  
    visibility: hidden;  
    position: relative;  
    display: inline-block;  
    width: 1em;  
    height: 1em;
    margin-right:0.5rem;
}  
input[type='radio']:before{  
    font-size:1em;  
    top:12%;  
    display: inline-block;  
    position: absolute;  
    content:'';  
    visibility: visible;  
    height: 1.2em;  
    width: 1.2em;  
    border-radius:50%;
    display: block; 
    border:1px solid #3f3f3f;
}  
input[type='radio']:checked:before{  
    font-size:1em;  
    content:'';  
    visibility: visible;  
    height: 1.2em;  
    width: 1.2em;  
    border-radius:50%;
    border:1px solid #ccc;
    background:url('/dist/static/img/g.png') no-repeat #ff4d4d;
    background-size:100%;
}
.depend{
  height:26rem;
  width:90%;
  padding-top:3rem;
  margin-left:5%;
  background:#fff;
  border-radius:10px;
  position: fixed;
  top:14rem;
  z-index:1001;
}
.circle{
  position: absolute;
  top:-35px;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  height:70px;
  width:70px;
  z-index:1002;
  border-radius:50%;
  background:url('/dist/static/img/c.png') no-repeat #ff4d4d;
  background-size:100%;
}
.footer{
  position:absolute;
  bottom:0;
  z-index: 1003;
  height:4rem;
  width:100%;
  text-align:center;
  line-height:4rem;
  font-size:18px;
  color:#ff4d4d;
}
</style>